<template>
  <div class="hello">
    <!-- 在v-for循环的时候vue建议为每一项添加key值 -->
   <div v-for="item in list" @click="changess(item.id)" 
   :class="{ active: item.id==change }" :key="item.id" class="list-group-item">
   
   {{item.name}}</div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      list: [
        { name: '第一项', id: 1 },
        { name: '第二项', id: 2 },
        { name: '第三项', id: 3 },
      ],
      change: 1,
    };
  },
  methods: {
    changess(id) {
      this.change = id;
      // this.$router.push页面跳转，传递的参数为跳转路由
      // name 跳转的路由名字
      // query 传递的条件，以url方式传值
      this.$router.push({
        name: 'Detail',
        query: {
          id,
        },
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
